<template>
  <view class="home-container">
    <!-- 自定义状态栏 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>


    <!-- 主要内容区域 -->
    <scroll-view
        class="main-content"
        scroll-y="true"
        :refresher-enabled="true"
        :refresher-triggered="isRefreshing"
        @refresherrefresh="onRefresh"
        @scrolltolower="onLoadMore"
    >
      <!-- 顶部搜索区域（随内容滚动） -->
      <view class="search-header">
        <!-- 目的港选择 -->
        <view class="port-selector" :class="{ 'selected': selectedPort }" @click="selectPort">
          <view class="port-info">
            <text class="port-icon">🚢</text>
            <view class="port-text">
              <text class="port-label">{{ selectedPort ? '已选择' : '目的港' }}</text>
              <text class="port-name" :class="{ 'selected': selectedPort }">
                {{ selectedPort ? selectedPort.name : '请选择目的港' }}
              </text>
            </view>
          </view>
          <text class="arrow-icon" :class="{ 'rotated': selectedPort }">▼</text>
        </view>

        <!-- 搜索框 -->
        <view class="search-box" @click="goToSearch">
          <view class="search-content">
            <text class="search-icon">🔍</text>
            <text class="search-placeholder">搜索商品、品牌</text>
          </view>
        </view>

        <!-- 地图图标 -->
        <view class="map-icon" @click="goToMap">
          <text class="icon">🗺️</text>
        </view>
      </view>

      <!-- 轮播图 -->
      <view class="banner-section">
        <swiper
            class="banner-swiper"
            :indicator-dots="true"
            :autoplay="true"
            :interval="3000"
            :duration="500"
            :circular="true"
            indicator-color="rgba(255, 255, 255, 0.3)"
            indicator-active-color="#FFFFFF"
        >
          <swiper-item v-for="(banner, index) in bannerList" :key="index" @click="onBannerClick(banner)">
            <image class="banner-image" :src="banner.image" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </view>

      <!-- 分类导航 -->
      <view class="category-section">
        <scroll-view class="category-scroll" scroll-x="true" show-scrollbar="false">
          <view class="category-list">
            <view
                v-for="(category, index) in categoryList"
                :key="index"
                class="category-item"
                @click="goToCategory(category)"
            >
              <view class="category-icon">
                <image :src="category.icon" mode="aspectFill" />
              </view>

              <text class="category-name">{{ category.name }}</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 专题活动区 -->
      <view v-if="activityList.length > 0" class="activity-section">
        <view class="section-header">
          <text class="section-title">🎉 专题活动</text>
          <text class="section-more" @click="viewAllActivities">查看更多</text>
        </view>
        <view class="activity-list">
          <view
              v-for="(activity, index) in activityList"
              :key="index"
              class="activity-item"
              @click="goToActivity(activity)"
          >
            <image class="activity-image" :src="activity.image" mode="aspectFill" />
            <view class="activity-info">
              <text class="activity-title">{{ activity.title }}</text>
              <text class="activity-desc">{{ activity.description }}</text>
              <text class="activity-time">{{ activity.timeRange }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 热门推荐 -->
      <view class="recommend-section">
        <view class="section-header">
          <text class="section-title">
            {{ selectedPort ? `🚢 ${selectedPort.name}商品` : '🔥 热门推荐' }}
          </text>
          <view class="recommend-controls">
            <text class="refresh-btn" @click="refreshRecommend">刷新</text>
          </view>
        </view>

        <!-- 推荐商品网格 -->
        <view v-if="recommendProducts.length > 0" class="product-grid">
          <view
              v-for="(product, index) in recommendProducts"
              :key="index"
              class="product-item"
              @click="goToProduct(product)"
          >
            <ob-product-card :product="product" />
          </view>
        </view>

        <!-- 空状态 -->
        <view v-else class="empty-state">
          <text class="empty-text">{{ selectedPort ? `${selectedPort.name}暂无商品` : '暂无推荐商品' }}</text>
          <text class="empty-desc">{{ selectedPort ? '可以尝试选择其他港口查看商品' : '请稍后再试或选择目的港查看商品' }}</text>
        </view>

        <!-- 加载更多 -->
        <view v-if="hasMoreRecommend" class="load-more" @click="loadMoreRecommend">
          <text class="load-more-text">{{ isLoadingMore ? '加载中...' : '查看更多商品' }}</text>
        </view>
      </view>

      <!-- 底部安全区域 -->
      <view class="bottom-safe-area" :style="{ height: safeAreaInsetBottom + 'px' }"></view>
    </scroll-view>

    <!-- 返回顶部按钮 -->
    <view v-if="showBackTop" class="back-top" @click="scrollToTop">
      <text class="back-top-icon">↑</text>
    </view>

    <!-- 加载提示 -->
    <ob-loading :visible="isLoading" text="加载中..." />
  </view>
</template>

<script setup>
import { ref, computed, inject, onMounted, onUnmounted, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getPlatform } from '../../utils/common.js'
import productApi from '../../api/product.js'
import indexApi from '../../api/indexApi.js'
import userApi from '../../api/user.js'
import orderApi from '../../api/order.js'

// 全局状态
const store = inject('$store')

// 响应式数据
const bannerList = ref([])
const categoryList = ref([])
const activityList = ref([])
const recommendProducts = ref([])
const isLoading = ref(false)
const isRefreshing = ref(false)
const isLoadingMore = ref(false)
const hasMoreRecommend = ref(true)
const currentPage = ref(1)
const showBackTop = ref(false)

// 获取系统信息
const platform = getPlatform()
const statusBarHeight = platform.statusBarHeight || 0
const safeAreaInsetBottom = platform.safeAreaInsetBottom || 0

// 计算属性
const selectedPort = computed(() => store.state.selectedPort)

// 检查登录状态
const checkLoginStatus = () => {
  // 登录状态检查逻辑
}

// 加载轮播图
const loadBanners = async () => {
  try {
    // 使用实际的图片资源
    bannerList.value = [
      {
        id: 1,
        image: '/static/images/719f70d4571e719cc99b39d0fdac8353.png',
        link: ''
      },
      {
        id: 2,
        image: '/static/images/c6cdbd50bfd89f8e4280e2893e323bbd.png',
        link: ''
      }
    ]
  } catch (error) {
    console.error('加载轮播图失败:', error)
    // 设置默认轮播图
    bannerList.value = [
      {
        id: 1,
        image: '/static/images/719f70d4571e719cc99b39d0fdac8353.png',
        link: ''
      }
    ]
  }
}

// 加载分类导航（汇总所有二级分类并展示在首页）
const loadCategories = async () => {
  try {
    // 1) 获取所有一级分类
    const level1List = await productApi.getCategoryLevel1()
    const ids = Array.isArray(level1List) ? level1List.map(i => i.level1Id || i.id) : []

    // 2) 针对每个一级分类，请求其二级分类，合并为一个数组
    const level2All = ids.length
        ? (await Promise.all(ids.map(id => productApi.getCategoryLevel2(id)))).flat()
        : []

    // 3) 统一处理图标URL
    const toUrl = (iconPath) => {
      if (!iconPath) return ''
      if (iconPath.startsWith('http')) return iconPath
      return `http://8.145.55.161:19000${iconPath.startsWith('/') ? iconPath : '/' + iconPath}`
    }

    // 4) 映射成首页所需结构：id/name/icon
    categoryList.value = (level2All || []).map(c => ({
      id: c.level2Id || c.id,
      name: c.name,
      icon: toUrl(c.icon)
    }))

    // 兜底：若接口暂无数据，使用默认分类
    if (!categoryList.value.length) {
      categoryList.value = [
        { id: 1, name: '食品饮料', icon: '/static/icons/food.png' },
        { id: 2, name: '生活用品', icon: '/static/icons/daily.png' },
        { id: 3, name: '电子数码', icon: '/static/icons/electronics.png' },
        { id: 4, name: '服装鞋帽', icon: '/static/icons/clothing.png' },
        { id: 5, name: '护理健康', icon: '/static/icons/health.png' },
        { id: 6, name: '运动户外', icon: '/static/icons/sports.png' },
        { id: 7, name: '母婴用品', icon: '/static/icons/baby.png' },
        { id: 8, name: '更多分类', icon: '/static/icons/more.png' }
      ]
    }
  } catch (error) {
    console.error('加载分类导航失败:', error)
    // 设置默认分类
    categoryList.value = [
      { id: 1, name: '食品饮料', icon: '/static/icons/food.png' },
      { id: 2, name: '生活用品', icon: '/static/icons/daily.png' },
      { id: 3, name: '电子数码', icon: '/static/icons/electronics.png' },
      { id: 4, name: '服装鞋帽', icon: '/static/icons/clothing.png' },
      { id: 5, name: '护理健康', icon: '/static/icons/health.png' },
      { id: 6, name: '运动户外', icon: '/static/icons/sports.png' },
      { id: 7, name: '母婴用品', icon: '/static/icons/baby.png' },
      { id: 8, name: '更多分类', icon: '/static/icons/more.png' }
    ]
  }
}

// 加载活动列表
const loadActivities = async () => {
  try {
    // 临时使用空数组，后续需要后端提供活动API
    activityList.value = []
  } catch (error) {
    console.error('加载活动列表失败:', error)
    activityList.value = []
  }
}

// 加载推荐商品（根据选中港口加载对应商品）
const loadRecommendProducts = async (reset = false) => {
  try {
    console.log('=== loadRecommendProducts 开始 ===')
    console.log('reset参数:', reset)
    console.log('当前选择的港口:', selectedPort.value)
    console.log('港口是否有效:', selectedPort.value && selectedPort.value.id)

    if (reset) {
      recommendProducts.value = []
      currentPage.value = 1
    }

    let response
    // 如果有选中的港口，加载该港口的所有商品；否则加载全局高评分商品
    if (selectedPort.value && selectedPort.value.id) {
      console.log('Loading all products for port:', selectedPort.value.id, selectedPort.value.name)
      console.log('API call params:', {
        portId: selectedPort.value.id,
        page: currentPage.value,
        size: 12,
        sortBy: 'score_desc'
      })
      response = await indexApi.getPortProducts(selectedPort.value.id, {
        page: currentPage.value,
        size: 12,
        sortBy: 'score_desc' // 按评分降序排列，显示热门商品
      })
      console.log('Port products response:', response)

      // 检查响应结构
      if (response && response.data) {
        console.log('Response data structure:', Object.keys(response.data))
        console.log('Products array:', response.data.products)
      }
    } else {
      console.log('Loading global high score products')
      // 没有选择港口时，使用全局高评分商品
      response = await productApi.getHighScoreProducts()
      console.log('Global products response:', response)
    }

    // 统一数据结构
    let list = []
    let total = 0

    if (selectedPort.value && selectedPort.value.id) {
      // 港口商品API返回结构：后端返回格式为 { code: 200, data: { products: [...], totalCount: 10 } }
      const data = response?.data || response
      list = data?.products || []
      total = data?.totalCount || data?.total || 0

      console.log('Parsed port products:', {
        listLength: list.length,
        total: total,
        firstProduct: list[0]
      })
    } else {
      // 全局高评分商品API返回结构
      list = Array.isArray(response) ? response : (response?.data || [])
      total = list.length
    }

    // 辅助：将图片路径补全为可访问URL
    const toUrl = (img) => {
      if (!img) return ''
      if (typeof img === 'string' && img.includes(',')) img = img.split(',')[0].trim()
      if (typeof img !== 'string') img = String(img || '')
      return img.startsWith('http') ? img : `http://8.145.55.161:19000${img.startsWith('/') ? img : '/' + img}`
    }

    // 映射到产品卡片所需字段
    const newProducts = (list || []).map((item, index) => {
      const product = {
        id: item.productId || item.id,
        name: item.name || item.productName,
        price: item.price || 0,
        originalPrice: item.originalPrice,
        image: toUrl(item.coverImage || item.pic || item.image || item.thumbnail),
        sales: item.salesCount || item.sales,
        rating: item.avgScore || item.rating
      }

      // 调试第一个产品的字段映射
      if (selectedPort.value && index === 0) {
        console.log('Mapping first product:', {
          original: item,
          mapped: product
        })
      }

      return product
    })

    if (reset) {
      recommendProducts.value = newProducts
    } else {
      recommendProducts.value = [...recommendProducts.value, ...newProducts]
    }

    // 检查是否还有更多商品
    if (selectedPort.value && selectedPort.value.id) {
      hasMoreRecommend.value = recommendProducts.value.length < total
    } else {
      hasMoreRecommend.value = false
    }

    console.log(`Loaded ${newProducts.length} products, total: ${recommendProducts.value.length}, hasMore: ${hasMoreRecommend.value}`)
  } catch (error) {
    console.error('加载推荐商品失败:', error)
    uni.showToast({
      title: '加载商品失败',
      icon: 'none'
    })
  }
}



// 下拉刷新
const onRefresh = async () => {
  isRefreshing.value = true
  try {
    await initPageData()
  } finally {
    isRefreshing.value = false
  }
}

// 加载更多
const onLoadMore = () => {
  if (!isLoadingMore.value && hasMoreRecommend.value) {
    loadMoreRecommend()
  }
}

// 加载更多推荐商品
const loadMoreRecommend = async () => {
  if (isLoadingMore.value || !hasMoreRecommend.value) return

  isLoadingMore.value = true
  try {
    currentPage.value += 1
    await loadRecommendProducts(false)
  } finally {
    isLoadingMore.value = false
  }
}

// 刷新推荐
const refreshRecommend = async () => {
  try {
    await loadRecommendProducts(true)
    uni.showToast({
      title: '刷新成功',
      icon: 'success'
    })
  } catch (error) {
    uni.showToast({
      title: '刷新失败',
      icon: 'none'
    })
  }
}

// 页面跳转方法
const selectPort = () => {
  uni.navigateTo({
    url: '/pages/port/select'
  })
}

const goToSearch = () => {
  uni.navigateTo({
    url: '/pages/search/index'
  })
}



const goToMap = () => {
  uni.navigateTo({
    url: '/pages/map/index'
  })
}

const onBannerClick = (banner) => {
  if (banner.link) {
    if (banner.link.startsWith('http')) {
      // 外部链接
      uni.navigateTo({
        url: `/pages/common/webview?url=${encodeURIComponent(banner.link)}`
      })
    } else {
      // 内部页面
      uni.navigateTo({
        url: banner.link
      })
    }
  }
}

const goToCategory = (category) => {
  const name = encodeURIComponent(category.name || '')
  uni.navigateTo({
    url: `/pages/category/list?categoryId=${category.id}&categoryName=${name}`
  })
}

const goToActivity = (activity) => {
  uni.navigateTo({
    url: `/pages/activity/detail?activityId=${activity.id}`
  })
}

const viewAllActivities = () => {
  uni.navigateTo({
    url: '/pages/activity/list'
  })
}

const goToProduct = (product) => {
  uni.navigateTo({
    url: `/pages/product/detail?productId=${product.id}`
  })
}

const scrollToTop = () => {
  // 回到顶部
  // 注意：这个功能需要获取scroll-view的实例，在实际开发中需要相应处理
  showBackTop.value = false
}

// 监听滚动事件
const onScroll = (e) => {
  showBackTop.value = e.detail.scrollTop > 300
}

// 初始化页面数据
const initPageData = async () => {
  try {
    isLoading.value = true

    // 检查当前港口状态
    console.log('当前选择的港口:', selectedPort.value)
    console.log('Store state:', store.state)

    // 如果没有选择港口，设置默认港口
    if (!selectedPort.value) {
      console.log('没有选择港口，设置默认港口')
      try {
        const portsResponse = await indexApi.getAllPorts()
        console.log('获取到的港口列表:', portsResponse)
        if (portsResponse && portsResponse.length > 0) {
          // 设置第一个港口为默认港口
          const defaultPort = portsResponse[0]
          console.log('设置默认港口:', defaultPort)
          store.actions.setSelectedPort(defaultPort)
          console.log('设置完成后，当前港口:', selectedPort.value)
        }
      } catch (error) {
        console.error('获取港口列表失败:', error)
      }
    } else {
      console.log('已有选择的港口:', selectedPort.value.name)
    }

    await Promise.all([
      loadBanners(),
      loadCategories(),
      loadActivities(),
      loadRecommendProducts(true)
    ])
  } catch (error) {
    console.error('首页数据加载失败:', error)
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none'
    })
  } finally {
    isLoading.value = false
  }
}

// 监听选中港口的变化，自动刷新推荐商品
watch(selectedPort, (newPort, oldPort) => {
  console.log('Port changed:', 'new:', newPort, 'old:', oldPort)
  // 只有当港口真正改变时才刷新（避免初始化时重复调用）
  if (newPort?.id !== oldPort?.id) {
    console.log('Port ID changed, reloading products...')
    loadRecommendProducts(true)
  }
}, { deep: true })

// 页面生命周期
onMounted(() => {
  initPageData()
  checkLoginStatus()
})

// 使用 UniApp 的 onShow 生命周期
onShow(() => {
  // 页面显示时检查港口是否变化，并重新加载推荐商品
  console.log('=== 首页 onShow 触发 ===')
  console.log('当前选择的港口:', selectedPort.value)
  console.log('Store 状态:', store.state)
  console.log('港口是否存在:', !!selectedPort.value)
  if (selectedPort.value) {
    console.log('港口详情:', {
      id: selectedPort.value.id,
      name: selectedPort.value.name,
      code: selectedPort.value.code
    })
  }
  console.log('即将加载推荐商品...')
  loadRecommendProducts(true)
  checkLoginStatus()
})

onUnmounted(() => {
  // 清理定时器等
})
</script>

<style lang="scss" scoped>
.home-container {
  background: #F5F5F5;
  min-height: 100vh;
}

.status-bar {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.search-header {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  padding: 10px 15px;
  margin-bottom: 20px; /* 与轮播图留白：20px */
  display: flex;
  align-items: center;
  gap: 10px;
}

.port-selector {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 100px;
  transition: all 0.3s ease;

  &.selected {
    background: rgba(255, 215, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
  }

  .port-info {
    display: flex;
    align-items: center;
    gap: 6px;

    .port-icon {
      font-size: 16px;
    }

    .port-text {
      display: flex;
      flex-direction: column;

      .port-label {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1;
      }

      .port-name {
        font-size: 12px;
        color: #FFFFFF;
        font-weight: 500;
        line-height: 1.2;
        margin-top: 2px;
        transition: all 0.3s ease;

        &.selected {
          color: #FFD700;
          font-weight: 600;
          text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
        }
      }
    }
  }

  .arrow-icon {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    margin-left: 4px;
    transition: all 0.3s ease;

    &.rotated {
      transform: rotate(180deg);
      color: #FFD700;
    }
  }
}

.search-box {
  flex: 1;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 25px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.12);
  }

  .search-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;

    .search-icon {
      font-size: 18px;
      color: #6c757d;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .search-placeholder {
      flex: 1;
      font-size: 15px;
      color: #6c757d;
      font-weight: 400;
      letter-spacing: 0.3px;
    }
  }
}

.map-icon {
  position: relative;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;

  .icon {
    font-size: 18px;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  &:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
  }
}

.main-content {
  flex: 1;
  height: calc(100vh - 130px); /* 减去状态栏和搜索栏高度 */
}

.banner-section {
  /* 与搜索头部保持 6px 间距（通过 search-header 的 margin-bottom 实现） */
  margin: 0 15px 12px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.banner-swiper {
  height: 220px;
}

.banner-image {
  width: 100%;
  height: 100%;
}



.category-section {
  background: #FFFFFF;
  margin: 0 15px 15px;
  border-radius: 12px;
  padding: 15px 0;
}

.category-scroll {
  padding: 0 15px;
}

.category-list {
  display: flex;
  gap: 20px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;

  .category-icon {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: #F7F8FA;
    border: 1px solid #edf0f3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .category-name {
    max-width: 64px;
    font-size: 12px;
    color: #333333;
    text-align: center;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &:active {
    transform: scale(0.98);
  }
}

.activity-section {
  background: #FFFFFF;
  margin: 0 15px 15px;
  border-radius: 12px;
  padding: 15px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }

  .section-more {
    font-size: 14px;
    color: var(--primary-color);
  }
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  background: #F8F9FA;
  border-radius: 8px;
  padding: 12px;
  gap: 12px;

  .activity-image {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .activity-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .activity-title {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      margin-bottom: 4px;
    }

    .activity-desc {
      font-size: 14px;
      color: #666666;
      margin-bottom: 4px;
    }

    .activity-time {
      font-size: 12px;
      color: #999999;
    }
  }
}

.recommend-section {
  background: #FFFFFF;
  margin: 0 15px 15px;
  border-radius: 12px;
  padding: 15px;
}

.recommend-controls {
  .refresh-btn {
    font-size: 14px;
    color: var(--primary-color);
  }
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.product-item {
  width: calc(50% - 5px);
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  margin-top: 15px;

  .empty-text {
    display: block;
    font-size: 16px;
    color: #666666;
    margin-bottom: 8px;
  }

  .empty-desc {
    display: block;
    font-size: 14px;
    color: #999999;
  }
}

.load-more {
  text-align: center;
  padding: 20px;
  margin-top: 10px;

  .load-more-text {
    font-size: 14px;
    color: #666666;
  }
}

.back-top {
  position: fixed;
  right: 20px;
  bottom: 100px;
  width: 45px;
  height: 45px;
  background: var(--primary-color);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 999;

  .back-top-icon {
    font-size: 20px;
    color: #FFFFFF;
    font-weight: bold;
  }
}

.bottom-safe-area {
  background: transparent;
}
</style>